<template>
  <div class="box">
    <headers></headers>
    <van-tabs v-model:active="active">
      <van-tab title="标签 1">
        <swiper :images="images"></swiper>
        <van-grid>
          <van-grid-item
            v-for="(v, i) in list"
            :key="i"
            :icon="v.image_src"
            :text="v.name"
          />
          <div class="item">
            <van-grid :border="false" :column-num="2">
              <van-grid-item
                v-for="(v, i) in list1"
                :key="i"
                :style="i % 2 == 0 ? { height: '22rem' } : { height: '29rem' }"
              >
                <van-image
                  :src="
                    v.goods_small_logo
                      ? v.goods_small_logo
                      : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'
                  "
                />
                <van-image
                  :v-lazy="
                    v.goods_small_logo
                      ? v.goods_small_logo
                      : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'
                  "
                />
                <div>{{ v.goods_name }}</div>
              </van-grid-item>
            </van-grid>
          </div>
        </van-grid>
      </van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { swiperdataApi } from "@/api/api";
import { catitemsApi } from "@/api/api";
import { searchApi } from "@/api/api";
import headers from "@/components/header.vue";
import swiper from "@/components/swiper.vue";
const images = ref([]);
const list = ref([]);
const list1 = ref([]);
const swipeFun = () => {
  swiperdataApi().then((res) => {
    images.value = res.data.message;
  });
};
swipeFun();

const catFun = () => {
  catitemsApi().then((res) => {
    list.value = res.data.message;
  });
};
catFun();

const searchFun = () => {
  searchApi().then((res) => {
    list1.value = res.data.message.goods;
  });
};
searchFun();
</script>

<style lang="scss" scoped></style>
